import React, { Key, ReactNode, useEffect, useState } from 'react';
import logo from '../../assets/images/logo.jpg';
import { Layout, Typography, Input, Menu, Button, Dropdown, message, Spin, Skeleton } from 'antd';
import { GlobalOutlined } from '@ant-design/icons';
import styles from './Header.module.css';
import { useNavigate } from 'react-router-dom';
import store from '../../redux/store';
import { LanguageState } from '../../redux/languageReducer';
import SubMenu from 'antd/lib/menu/SubMenu';
import axios from 'axios';


type Props = {
  children?: JSX.Element;
  list?: Array<any>[]
  handleClick1: any
};

interface IMenu {
  id: Key | null | undefined;
  name: ReactNode;
  title: string;
  children: Array<IMenu>;
  path: string;
  icon?: string;
}

export const Header: React.FC<Props> = ({ list, handleClick1 }: any) => {

  const navigate = useNavigate();

  const [defaultKey, setKey] = useState<Array<any>>([])

  interface State extends LanguageState { }



  const [value, setValue] = useState<any>()

  const go = () => {
    message.info('功能暂未开放')
  }



  const renderNoChildMenu = (item: IMenu) => {
    return <Menu.Item key={item.id}>{item.name}</Menu.Item>
  }
  // 渲染含有children的目录
  const renderChildMenu = (item: IMenu) => {
    return <SubMenu key={item.id} title={item.name}>
      {
        item.children.map((child) => {
          return renderMenu(child)
        })
      }
    </SubMenu>
  }
  // 渲染菜单
  const renderMenu = (item: IMenu) => {
    return item.children.length ? renderChildMenu(item) : renderNoChildMenu(item)
  }

  const handleClick = (e) => {
    console.log(e.key)
    handleClick1(e)
  }

  const onSearch = () => {
    if (!value) {
      return message.warn('请输入搜索项')
    }
    navigate(
      '/result',
      { state: { sea: value } }
    )
  }

  return (
    <div className={styles['app-header']}>
      <div className={styles["top-header"]}>
        <div className={styles['headers']}>
          <Typography.Text>欢迎进入柠聚户外运动有限公司官网！</Typography.Text>
          <Button.Group className={styles["button-group"]}>
            <Button onClick={() => go()}>注册</Button>
            <Button onClick={() => go()}>登录</Button>
          </Button.Group>
        </div>
      </div>
      <div className={styles['all-top']}>
        <div className={styles['main-header']}>
          <span onClick={() => navigate('/')}>
            <img className={styles['App-logo']} src={logo} alt="logo" />
            <Typography.Title
              level={3}
              className={styles.title}
            >
              西安柠聚
            </Typography.Title>
          </span>
          <Input.Search
            onChange={e => setValue(e.target.value)}
            value={value}
            className={styles['search-input']}
            onSearch={onSearch}
            placeholder={'请输入旅游目的地、主题、或关键词'}
          />
        </div>
        <Menu
          onClick={handleClick}
          defaultSelectedKeys={['21']}
          mode={"horizontal"}
          className={styles["main-menu"]}
        >
          {
            list.length <= 0 ? '' : list.map((item: any) => renderMenu(item))
          }
        </Menu>
      </div>

    </div>
  )
}

